<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable } from 'element-plus';
import Header from '@/views/content/util/header.vue'
import { onMounted, ref} from 'vue'
import { classify1ListApi } from '@/apis/productApi'
//组件
import Limit from '@/views/content/util/limit.vue'
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"
import SButton from "@/views/content/util/button/sButton.vue"

const getLimitItemList = (displayedItemList:Array<Object>) => {
    // console.log("接收：")
    // console.log(displayedItemList)
    limitItemList.value = displayedItemList
}

const activeName = ref('普通分类')
const itemList = ref([])
const limitItemList = ref([])
onMounted(async () => {
    const res = await classify1ListApi()
    itemList.value = res.data
    itemList.value = itemList.value.map(row => {
        return {
            ...row,
            status: row.status === 1 ? true : false
        };
    })
})
</script>

<template>
    <div  style="width: 97%;">
        <Header title="商品分类"></Header>
        <div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="" type="card">
                <el-tab-pane label="普通分类" name="普通分类">
                    <div>
                        <IButton title="添加分类" type="add"></IButton>
                        <IButton title="导入分类" type="in" ></IButton>
                        <IButton title="导出分类" type="out"></IButton>
                    </div>
                    <div style="margin-top: 20px;">
                        <el-table :data="limitItemList" :row-key="row => row.id" stripe 
                            :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}">
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
                            <el-table-column label="分类ID" prop="id"></el-table-column>
                            <el-table-column label="分类名称" prop="class1Name"></el-table-column>
                            <el-table-column label="分类图标" prop="classLogo">
                                <template #default="{ row }">
                                    <div class="item-container" v-if="row.classLogo!==null">
                                        <img style="width: 50px;height: 50px;" :src="(row.classLogo)">
                                    </div>
                                    <div v-if="row.classLogo===null">
                                    <svg t="1698064936912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3435" width="16" height="16"><path d="M476.7232 112.503467L121.634133 279.825067a68.266667 68.266667 0 0 0 1.6896 124.279466l355.089067 155.648a68.266667 68.266667 0 0 0 54.818133 0l355.089067-155.6992a68.266667 68.266667 0 0 0 1.672533-124.279466l-355.089066-167.253334a68.266667 68.266667 0 0 0-58.197334 0zM150.7328 341.572267l355.089067-167.304534 355.072 167.253334-355.089067 155.6992-355.072-155.648zM860.842667 685.346133a34.133333 34.133333 0 0 1 28.962133 61.781334l-2.4064 1.1264-368.810667 155.682133a34.133333 34.133333 0 0 1-23.671466 1.0752l-2.8672-1.0752-368.7936-155.648a34.133333 34.133333 0 0 1 24.064-63.829333l2.491733 0.938666 355.498667 150.050134 355.5328-150.101334z" fill="#444444" p-id="3436"></path><path d="M853.333333 512l-341.486933 153.634133L170.666667 512.341333v55.210667c0 13.4656 7.748267 25.6512 19.712 30.9248l286.190933 126.976a78.7968 78.7968 0 0 0 35.2768 8.3968c12.049067 0 24.081067-2.798933 35.293867-8.3968l286.498133-127.249067A33.7408 33.7408 0 0 0 853.333333 567.278933V512z" fill="#00B386" p-id="3437"></path></svg>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="启用状态" prop="status">
                                <template #default="{ row }">
                                    <el-switch v-model="row.status" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" prop="">
                                <template #default="{ row }">
                                    <div class="button-container">
                                        <el-tooltip content="编辑" placement="top">
                                            <OButton></OButton>
                                        </el-tooltip>
                                        <el-tooltip content="删除" placement="top">
                                            <OButton type="delete"></OButton>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>
                    <div>
                        <Limit :itemList="itemList" @updateItemList="getLimitItemList" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="特色分类" name="特色分类"></el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>
<style scoped lang="scss">
::v-deep .el-table th>.cell {
    color: black;
}
::v-deep .el-tabs__item.is-active {
  color: $seleceted;
  opacity: 1;
}

::v-deep .el-tabs__item:hover {
  color: $seleceted;
  cursor: pointer;
  opacity: 1;
}

</style>